<script setup>
import { Search, Edit, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
const routes = ref([]);
//用户搜索时选中的线路id
const routeId = ref("");
//用户搜索时选中的线路名称
const routeName = ref("");
//用户搜索时选中的线路状态
const routeState = ref("");

//分页条数据模型
const page = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(5); //每页条数

//声明一个异步函数
import {
  routeListService,
  routeAddService,
  routeUpdateService,
  routeDeleteService,
} from "@/api/routeStation.js";
//回显文章分类
const routeList = async () => {
  try {
    let params = {
      page: page.value,
      pageSize: pageSize.value,
      routeName: routeName.value ? routeName.value : null,
      routeState: routeState.value ? routeState.value : null,
    };
    let result = await routeListService(params);
    //渲染视图
    total.value = result.data.total;
    routes.value = result.data.rows;
  } catch (error) {
    console.error("Error data: ", error);
  }
};
routeList();

//控制添加分类弹窗
const dialogVisible = ref(false);

//添加分类数据模型
const routeModel = ref({
  routeName: "",
  routeDes: "",
  routeStatus: 1,
  routeCapacity: 20,
  addDate: "",
  startPoint: "",
  endPoint: "",
  startTime: "",
  endTime: "",
  createTime: "",
  updateTime: "",
  routeStationList: null,
});
//添加分类表单校验
const rules = {
  routeName: [{ required: true, message: "请输入线路名称", trigger: "blur" }],
  routeDes: [{ required: false, message: "请输入线路描述", trigger: "blur" }],
  routeStatus: [{ required: true, message: "请输入线路状态", trigger: "blur" }],
  routeCapacity: [
    { required: true, message: "请输入线路容量", trigger: "blur" },
  ],
  startPoint: [{ required: false, message: "请输入起始站点", trigger: "blur" }],
  endPoint: [{ required: false, message: "请输入终点", trigger: "blur" }],
  startTime: [{ required: true, message: "请输入开始时间", trigger: "blur" }],
  endTime: [{ required: true, message: "请输入结束时间", trigger: "blur" }],
};

//调用接口,添加表单
import { ElMessage, ElMessageBox } from "element-plus";
const addRoute = async () => {
  //调用接口
  let result = await routeAddService(routeModel.value);
  ElMessage.success(result.msg ? result.msg : "添加成功");

  //调用获取所有文章分类的函数
  routeList();
  dialogVisible.value = false;
};

//定义变量,控制标题名称
const title = ref("");
//展示编辑弹窗
const showDialog = (row) => {
  dialogVisible.value = true;
  title.value = "修改线路";
  //数据拷贝
  routeModel.value.routeName = row.routeName;
  routeModel.value.routeDes = row.routeDes;
  routeModel.value.routeStatus = row.routeStatus;
  routeModel.value.routeCapacity = row.routeCapacity;
  routeModel.value.startPoint = row.startPoint;
  routeModel.value.endPoint = row.endPoint;
  routeModel.value.startTime = row.startTime;
  routeModel.value.endTime = row.endTime;
  //扩展id属性,将来需要传递给后台,完成分类的修改
  routeModel.value.routeId = row.routeId;
};

//修改线路
const updateRoute = async () => {
  //调用接口
  let result = await routeUpdateService(routeModel.value);
  ElMessage.success(result.msg ? result.msg : "修改成功");

  //调用获取所有文章分类的函数
  routeList();
  dialogVisible.value = false;
};

//清空模型数据
const clearData = () => {
  routeModel.value.routeName = "";
  routeModel.value.routeDes = "";
  routeModel.value.routeStatus = "";
  routeModel.value.routeCapacity = "";
  routeModel.value.startPoint = "";
  routeModel.value.endPoint = "";
  routeModel.value.startTime = "";
  routeModel.value.endTime = "";
};

//删除线路
const deleteRoute = (row) => {
  //提示用户 确认框
  ElMessageBox.confirm("你确认要删除该线路信息吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //调用接口
      let result = await routeDeleteService(row.routeId);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      //刷新列表
      routeList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  routeList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num;
  routeList();
};

function statusFormatter(row, column, value, index) {
  return value == 1 ? '开启' : '关闭';
}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <h1>线路列表</h1>
        <div class="extra">
          <el-button
            type="primary"
            @click="
              dialogVisible = true;
              title = '添加线路';
              clearData();
            "
            >添加线路</el-button
          >
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="routes" class="demo-form-inline">
      <el-form-item label="线路名称:">
      <el-input v-model="routes.routeName" placeholder="请输入" clearable />
    </el-form-item>
      <el-form-item label="线路名称:">
        <el-select placeholder="请选择" v-model="routeId">
          <el-option
            v-for="r in routes"
            :key="r.routeId"
            :label="r.routeName"
            :value="r.routeId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="线路状态：">
        <el-select placeholder="请选择" v-model="routeState">
          <el-option label="开启" value="开启"></el-option>
          <el-option label="关闭" value="关闭"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="routeList()">搜索</el-button>
        <el-button
          @click="
            routeId = '';
            routeState = '';
          "
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 线路列表 -->
    <el-table :data="routes" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="线路名称" prop="routeName"></el-table-column>
      <el-table-column label="线路状态" prop="routeStatus" :formatter="statusFormatter"></el-table-column>
      <el-table-column label="线路容量(辆)" prop="routeCapacity"></el-table-column>
      <el-table-column label="线路起点" prop="startPoint"></el-table-column>
      <el-table-column label="线路终点" prop="endPoint"></el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="165">
        <template #default="{ row }">
          <el-button type="info" plain @click="showDialog(row)">编辑</el-button>
          <el-button type="danger" plain @click="deleteRoute(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 添加线路弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
      <el-form
        :model="routeModel"
        :rules="rules"
        label-width="100px"
        style="padding-right: 30px"
      >
        <el-form-item label="线路名称" prop="routeName">
          <el-input
            v-model="routeModel.routeName"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="线路描述" prop="routeDes">
          <el-input
            v-model="routeModel.routeDes"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="线路状态" prop="routeStatus">
          <el-input
            v-model="routeModel.routeStatus"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="线路容量" prop="routeCapacity">
          <el-input
            v-model="routeModel.routeCapacity"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="起始站点" prop="startPoint">
          <el-input
            v-model="routeModel.startPoint"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="终点" prop="endPoint">
          <el-input
            v-model="routeModel.endPoint"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-input
            v-model="routeModel.startTime"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-input
            v-model="routeModel.endTime"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="title === '添加线路' ? addRoute() : updateRoute()"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>